<template>
  <div>
    <!-- 数据列表 -->
    <ul>
      <li v-for="item in displayedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElPagination } from 'element-plus';
import 'element-plus/dist/index.css';

export default {
  components: { ElPagination },
  setup() {
    const currentPage = ref(1); // 当前页码
    const pageSize = ref(10); // 每页显示条数
    const total = ref(100); // 总条数，这里只是一个示例值，你应该从后端获取真实的总条数
    const data = ref([]); // 你的数据列表，这里应该从后端获取数据并填充到这个数组中
    const displayedData = ref([]); // 当前页面显示的数据列表

    // 模拟从后端获取数据（在实际应用中，你应该在这里调用 API）
    const fetchData = () => {
      // 这里应该是从后端获取数据的逻辑，例如：
      // data.value = await fetchDataFromBackend(currentPage.value, pageSize.value);
      // total.value = await getTotalCountFromBackend(); // 获取总条数
      // 这里为了示例，我们手动设置一些数据和总条数：
      data.value = Array.from({ length: total.value }, (_, index) => ({ id: index + 1, name: `Item ${index + 1}` }));
    };

    // 分页大小改变时触发的事件处理函数
    const handleSizeChange = (newSize) => {
      pageSize.value = newSize;
      currentPage.value = 1; // 重置当前页码为第一页，或者根据你的业务逻辑处理
      fetchData(); // 重新获取数据以适应新的页面大小
    };

    // 当前页码改变时触发的事件处理函数
    const handleCurrentChange = (newPage) => {
      currentPage.value = newPage;
      fetchData(); // 重新获取数据以适应新的页面页码
    };

    // 初始化时获取数据（或者在某个方法中调用）
    fetchData(); // 初始获取数据并设置分页参数和显示的数据列表等。
    displayedData.value = data.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value); // 设置当前页面显示的数据列表。
    return { currentPage, pageSize, total, displayedData, handleSizeChange, handleCurrentChange };
  }
};
</script>